<layout name="popup" />
<block name="content">
	<div class="popup-frame">
		<div class="popup-header">
			<div class="pull-left">
				<label>
					<input  type="radio" id="rb_dgp" name="type" value="dgp">
					<span class="lbl">部门级别-职位</span> </label>
				<label>
					<input  type="radio" id="rb_dp" name="type" value="dp">
					<span class="lbl">部门-职位</span> </label>

				<label>
					<input  type="radio" id="rb_dept" name="type" value="dept">
					<span class="lbl">部门</span> </label>

				<label>
					<input  type="radio" id="rb_emp" name="type" value="emp">
					<span class="lbl">人员</span> </label>
				<label class="hidden">
					<input  type="radio" id="rb_search" name="type" value="search">
					<span class="lbl">搜索</span> </label>
			</div>
			<div class="pull-right">
				<a class="btn btn_save" >确定</a>
				<a class="btn btn_close btn-return">关闭</a>
			</div>
		</div>
		<div class="popup-body">
			<div class="popup-body-scroll">
				<div class="popup-content">
					<div class="col-23 pull-left">
						<span class="popup-label"> <b class="hidden dgp">部门级别</b> <b class="hidden dp dept emp">部门</b> <b class="hidden search">搜索</b> </span>
						<div class="popup_tree_menu">
							<div id="dept_grade" style="width:100%;height:179px;" class="dgp hidden">
								{$list_dept_grade}
							</div>
							<div id="dept" style="width:100%;height:179px;" class="dp hidden dept">
								{$list_dept}
							</div>
							<div id="emp" style="width:100%;height:179px;" class="emp hidden">
								{$list_dept}
							</div>
							<div id="search" style="width:100%;height:179px;overflow:auto;padding-left:2px" class="search hidden">
								<div class="box">
									<div class="input-inline">
										<input type="text" class="input">
										<a class="add-on"><i class="fa fa-search"></i></a>
									</div>
								</div>
							</div>
						</div>
						<div>
							<span class="popup-label"><b class="hidden dgp dp ">职位</b></span>
							<span class="popup-label"><b class="hidden emp">人员</b></span>
							<span class="popup-label"><b class="hidden search">人员</b></span>
						</div>
						<div id="position" class="hidden dgp dp " style="width:100%;height:179px;">
							{$list_position}
						</div>
						<div id="addr_list" class="hidden emp" style="width:100%;height:179px;"></div>
						<div id="search_list" class="search hidden " style="width:100%;height:179px;">

						</div>
					</div>
					<div class="col-30 pull-left">
						<div class="col-7 pull-left text-center mid" style="margin-top: 24px;">
							<div style="height:206px;">
								<a data-val="rc" class="btn add_address"><i class="fa fa-angle-double-right"></i></a>
								<a class="hidden-lg btn btn_save">确定</a>
								<a class="btn btn-return btn_close">关闭</a>
							</div>
							<a data-val="cc" class="btn add_address"><i class="fa fa-angle-double-right"></i></a>
						</div>
						<div class="col-23 pull-left">
							<b class="popup-label">审批</b><span id="rc_count"></span>
							<div id="rc" class="selected" style="width:100%;height:179px;overflow:hidden">
								<ul></ul>
							</div>
							<b class="popup-label">协商</b><span id="cc_count"></span>
							<div id="cc" class="selected" style="width:100%;height:179px;overflow:hidden">
								<ul></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		var index = parent.layer.getFrameIndex(window.name);
		layui.use(['global'], function() {
			var $ = layui.jquery;

			$("#rb_{$type}").prop('checked', true);
			// 选择用户默认选择的类型
			$(".{$type}").removeClass("hidden");



		$('.btn_save').on('click', function() {
			$("#confirm_wrap,#consult_wrap,#refer_wrap", parent.document).hide();
			$("#confirm_wrap .address_list,#consult_wrap .address_list,#refer_wrap .address_list", parent.document).html("");

			$("#rc.selected li").each(function(i) {
				emp_no = $(this).attr('data');
				name = trim($(this).text());
				name = name.replace(/<.*>/, '');
				html_string = conv_inputbox_item(name, emp_no);
				$("#confirm_wrap .address_list", parent.document).append(html_string);
			});
			$("#cc.selected li").each(function(i) {
				emp_no = $(this).attr('data');
				name = trim($(this).text());
				name = name.replace(/<.*>/, '');
				html_string = conv_inputbox_item(name, emp_no);
				$("#consult_wrap .address_list", parent.document).append(html_string);
			});

			$("#confirm_wrap span a", parent.document).remove();
			$("#confirm_wrap .address_list span", parent.document).append("<b><i class=\"fa fa-arrow-right\"></i></b>");
			$("#confirm_wrap .address_list span b:last", parent.document).html("<i class=\"fa\"></i>");

			$("#consult_wrap span a", parent.document).remove();
			$("#consult_wrap .address_list span", parent.document).append("<b><i class=\"fa fa-arrow-right\"></i></b>");
			$("#consult_wrap .address_list span b:last", parent.document).html("<i class=\"fa\"></i>");

			$("#confirm_wrap,#consult_wrap,#refer_wrap", parent.document).show();
			parent.layer.close(index);
		});
		
			$(document).on("click", ".selected a.fa-times", function() {
				$(this).parent().remove();
				recount();
			});

			// 双击添加到收件人 因后添加的数据 所以需要用live函数
			$(document).on("dblclick", "#addr_list label", function() {
				$text = $(this).text();
				$val = $(this).find("input").val();
				if ($("#rc.selected li[data='" + $val + "']").length == 0) {
					$li = $('<li><span></span><a class="fa fa-times"></a></li>');
					$li.find('span').text($text);
					$li.attr('data', $val);
					$li.appendTo("#rc.selected ul");
					recount();
				};
			});

			$('.btn_close').on('click', function() {
				parent.layer.close(index);
			});

			$(document).on("dblclick", "#search_list label", function() {
				$text = $(this).text();
				$val = $(this).find("input").val();
				if ($("#rc.selected li[data='" + $val + "']").length == 0) {
					$li = $('<li><span></span><a class="fa fa-times"></a></li>');
					$li.find('span').text($text);
					$li.attr('data', $val);
					$li.appendTo("#rc.selected ul");
					recount();
				};
			});

			$(document).ready(function() {

				$("input[name='type']").on('click', function() {
					$("input[name='type']").each(function() {
						$("." + $(this).val()).addClass("hidden");
					});
					$("." + $(this).val()).removeClass("hidden");
					if ($(this).val() == 'dept') {
						$("#dept").height(380);
					} else {
						$("#dept").height(179);
					}
				});

				$("#emp .tree_menu  a").click(function() {
					$(".emp .tree_menu a").attr("class", "");
					var type = $("input[name='type']:checked").val();
					$(this).addClass("active");
					send_ajax("{:url('read')}", "type=" + type + "&id=" + $(this).attr("node"), function(data) {
						show_data("emp", data);
					});
					return false;
					//禁止连接生效
				});

				$("#dept .tree_menu a").click(function() {
					$("#dept .tree_menu a").each(function() {
						$(this).attr("class", "");
					});
					$(this).addClass("active");

					var type = $("input[name='type']:checked").val();

					return false;
					//禁止连接生效
				});

				$("#dept_grade .tree_menu a").click(function() {
					$("#dept_grade .tree_menu a").each(function() {
						$(this).attr("class", "");
					});
					$(this).addClass("active");

					var type = $("input[name='type']:checked").val();

					return false;
					//禁止连接生效
				});

				$("#position .tree_menu a").click(function() {
					$("#position .tree_menu a").each(function() {
						$(this).attr("class", "");
					});
					$(this).addClass("active");

					var type = $("input[name='type']:checked").val();

					return false;
					//禁止连接生效
				});
				//生成abcd..按钮

				var abc = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "M", "L", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");

				$("#search").append('<div class="input-inline" style="width:100%;"><input type="text"id="keyword" class="input"><a class="add-on">Go!</a></div>');
				for (var v in abc) {
					$("#search").append('<a class="btn btn-white btn-bitbucket" style="width:34px;height:21px;padding:0px;margin-bottom:5px;text-align:center;">' + abc[v] + '</a>');
					//$("#search").append('<button class="btn btn-return btn-circle btn-outline" type="button">' + abc[v] + '</button>')
				}
				$("#search").find("a").click(function() {
					send_ajax("{:url('read')}", "type=search&id=" + $(this).html(), function(data) {
						show_data("search", data);
					});
				});

			});
			//最终确认
			$('.btn_search').on('click', function() {
				send_ajax("{:url('read')}", "type=search&keyword=" + $("#keyword").val(), function(data) {
					show_data("search", data);
				});
			});

			$('.add_address').on('click', function() {
				var name = $(this).data("val");
				var type = $("input[name='type']:checked").val();
				switch (type) {
				case "dgp":
					$dept_grade_id = $("#dept_grade a.active").attr("node");
					$dept_grade_name = $("#dept_grade a.active span").text();

					if ($dept_grade_id == undefined) {
						layer.msg("请选择部门级别");
						return false;
					}
					$position_id = $("#position a.active").attr("node");
					$position_name = $("#position a.active span").text();

					if ($position_id == undefined) {
						layer.msg("请选择职位");
						return false;
					}
					$text = $dept_grade_name + "-" + $position_name;
					$val = "dgp_" + $dept_grade_id + "_" + $position_id;
					if ($("#" + name + ".selected li[data='" + $val + "']").length == 0) {
						$li = $('<li><span></span><a class="fa fa-times"></a></li>');
						$li.find('span').text($text);
						$li.attr('data', $val);
						$li.appendTo("#" + name + ".selected ul");
						recount();
					};
					break;
				case "dp":
					$dept_id = $("#dept a.active").attr("node");
					$dept_name = $("#dept a.active span").text();

					if ($dept_id == undefined) {
						layer.msg("请选择部门");
						return false;
					}
					$position_id = $("#position a.active").attr("node");
					$position_name = $("#position a.active span").text();

					if ($position_id == undefined) {
						layer.msg("请选择职位");
						return false;
					}
					$text = $dept_name + "-" + $position_name;
					$val = "dp_" + $dept_id + "_" + $position_id;
					if ($("#" + name + ".selected li[data='" + $val + "']").length == 0) {
						$li = $('<li><span></span><a class="fa fa-times"></a></li>');
						$li.find('span').text($text);
						$li.attr('data', $val);
						$li.appendTo("#" + name + ".selected ul");
						recount();
					};
					break;
				case "dept":
					$dept_id = $("#dept a.active").attr("node");
					$dept_name = $("#dept a.active span").text();

					if ($dept_id == undefined) {
						layer.msg("请选择部门");
						return false;
					}
					$text = $dept_name;
					$val = "dept_" + $dept_id;
					if ($("#" + name + ".selected li[data='" + $val + "']").length == 0) {
						$li = $('<li><span></span><a class="fa fa-times"></a></li>');
						$li.find('span').text($text);
						$li.attr('data', $val);
						$li.appendTo("#" + name + ".selected ul");
						recount();
					};
					break;

				case "emp":
					$("input:checked[name='addr_id']").each(function() {
						$(this).prop('checked', false);
						$text = $(this).parents("label").text().trim();
						$val = "emp_" + $(this).val();
						if ($("#" + name + ".selected li[data='" + $val + "']").length == 0) {
							$li = $('<li><span></span><a class="fa fa-times"></a></li>');
							$li.find('span').text($text);
							$li.attr('data', $val);
							$li.appendTo("#" + name + ".selected ul");
							recount();
						};
					});
					break;
				case "search":
					$("input:checked[name='addr_id']").each(function() {
						$(this).prop('checked', false);
						$text = $(this).parents("label").text().trim();
						$val = "emp_" + $(this).val();
						if ($("#" + name + ".selected li[data='" + $val + "']").length == 0) {
							$li = $('<li><span></span><a class="fa fa-times"></a></li>');
							$li.find('span').text($text);
							$li.attr('data', $val);
							$li.appendTo("#" + name + ".selected ul");
							recount();
						};
					});
					break;
				}
			});
		});

		function recount() {
			$("#rc_count").text("(" + $("#rc.selected li").length + ")");
			$("#cc_count").text("(" + $("#cc.selected li").length + ")");
			$("#bcc_count").text("(" + $("#bcc.selected li").length + ")");
		}


		// 显示AJAX 读取的数据
		function show_data(type, result) {
			if (type == "emp") {
				var index = "#addr_list";
			} else if (type == "search") {
				var index = "#search_list";
			}
			$(index).html("");
			for (s in result.data) {
				var id = result.data[s].id;
				var position_name = result.data[s].position_name;
				var emp_no = result.data[s].emp_no;
				var email = result.data[s].email;
				var name = result.data[s].name;
				var name = name + "/" + position_name;
				var html_string = conv_address_item(name, emp_no);
				$(index).append(html_string);
			}
		}

	</script>
</block>
